<template>
  <div>
    <div class="title">生成计划</div>
    <div class="content">
      <el-form
        ref="form"
        :disabled="seeFlag"
        :model="form"
        size="small"
        inline
        label-width="135px"
        label-position="auto"
        label-suffix="："
        :rules="rules"
      >
        <div class="line">
          <el-form-item label="贸易类型" prop="tradeFlag">
            <el-select
              v-model="form.tradeFlag"
              placeholder="请选择"
              clearable
              filterable
              style="width: 150px"
            >
              <el-option
                :label="item.meaning"
                :value="item.lowValue"
                v-for="(item, index) in dataList.INTERNALFG_IM"
                :key="index"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="出口船名航次" prop="voyId">
            <el-tooltip
              :content="form.voyName1"
              placement="bottom"
              popper-class="testtooltip"
              v-if="seeFlag"
            >
              <el-select
                v-model="form.voyId"
                @change="voyName"
                placeholder="搜索查询更多"
                clearable
                filterable
                remote
                :remote-method="remoteMethod"
                style="width: 150px"
              >
                <el-option
                  v-for="item in shipNo"
                  :key="item.id"
                  :label="
                    item.termCode +
                    '/' +
                    item.vslName +
                    '/' +
                    item.voyage +
                    '/' +
                    (item.iefg === 'I' ? '进口' : '出口')
                  "
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-tooltip>
            <el-select
              v-model="form.voyId"
              @change="voyName"
              placeholder="搜索查询更多"
              clearable
              filterable
              style="width: 150px"
              remote
              :remote-method="remoteMethod"
              v-else
            >
              <el-option
                v-for="item in shipNo"
                :key="item.id"
                :label="
                  item.termCode +
                  '/' +
                  item.vslName +
                  '/' +
                  item.voyage +
                  '/' +
                  (item.iefg === 'I' ? '进口' : '出口')
                "
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
          <!-- JSON.stringify(item) +item.iefg-->
        </div>

        <el-form-item label="作业码头" prop="termCode">
          <el-select
            clearable
            style="width: 150px"
            size="small"
            v-model="form.termCode"
            placeholder="请选择作业码头"
            :disabled="termDis"
          >
            <el-option
              :label="item.cnName"
              :value="item.termCode"
              v-for="(item, index) in termList"
              :key="index"
            ></el-option>
          </el-select>
        </el-form-item>
        <!-- @change="getVel" <el-form-item label="码头作业区"
                    prop="workzone">
          <el-select v-model="form.workzone"
                    :disabled="!form.termCode"
                     placeholder="请选择"
                     clearable
                     filterable
                     style="width:150px">
            <el-option v-for="item in dataList.workZone"
                       :key="item.id"
                       :label="item.cnName"
                       :value="item.id"></el-option>
          </el-select>
        </el-form-item> -->
        <el-form-item label="申请人" prop="cstCoperName">
          <el-input
            v-model="form.createUser"
            placeholder=""
            clearable
            disabled
            style="width: 150px"
          ></el-input>
        </el-form-item>
        <el-form-item label="开始时间" prop="opsttm">
          <el-date-picker
            type="datetime"
            @change="setVal"
            placeholder="选择日期"
            clearable
            value-format="yyyy-MM-dd HH:mm:ss"
            v-model="form.opsttm"
            style="width: 150px"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="结束时间" prop="opedtm">
          <el-date-picker
            type="datetime"
            placeholder="选择日期"
            disabled
            clearable
            value-format="yyyy-MM-dd HH:mm:ss"
            v-model="form.opedtm"
            style="width: 150px"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="结算方式" prop="payMode">
          <el-select
            v-model="form.payMode"
            disabled
            placeholder="请选择"
            clearable
            filterable
            style="width: 150px"
          >
            <el-option
              v-for="item in dataList.SETTLEMODE"
              :key="item.lowValue"
              :label="item.meaning"
              :value="item.lowValue"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="付款单位" prop="payer">
          <el-select
            v-model="form.payer"
            placeholder="请选择"
            clearable
            filterable
            style="width: 150px"
          >
            <el-option
              v-for="item in dataList.cstCoperListtomer"
              :key="item.customerCode"
              :label="item.name"
              :value="item.customerCode"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="货主单位" prop="consignor">
          <el-select
            v-model="form.consignor"
            placeholder="请选择"
            clearable
            filterable
            style="width: 150px"
          >
            <el-option
              v-for="item in dataList.consignor"
              :key="item.customerCode"
              :label="item.name"
              :value="item.customerCode"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="车队单位" prop="cstTrnscomCd">
          <el-select
            v-model="form.cstTrnscomCd"
            placeholder="请选择"
            clearable
            filterable
            style="width: 150px"
          >
            <el-option
              v-for="item in dataList.cstTrnscomCd"
              :key="item.customerCode"
              :label="item.name"
              :value="item.customerCode"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="发票抬头" prop="title">
          <el-input
            v-model="form.title"
            placeholder="请输入"
            clearable
            filterable
            style="width: 150px"
          >
          </el-input>
        </el-form-item>
        <el-form-item label="备注" prop="" style="display: block">
          <el-input
            type="textarea"
            placeholder="请输入船期备注"
            clearable
            v-model="form.remark"
            style="width: 710px"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="附件"
          prop="planAttachmentList"
          style="display: block"
        >
          <uploadImg
            @set="getFile"
            ref="myUpload"
            :seeFlag="seeFlag"
          ></uploadImg>
        </el-form-item>
      </el-form>
      <div class="btn">
        <el-upload
          action="#"
          :show-file-list="false"
          :before-upload="batchImportEmpty"
        >
          <el-button
            icon="el-icon-upload2"
            class="add"
            slot="trigger"
            type="primary"
            >箱导入</el-button
          >
          <el-button
            type="primary"
            class="add"
            icon="el-icon-plus"
            @click="add"
            v-if="!seeFlag"
            >新增箱</el-button
          >
          <el-button
            type="primary"
            class="add"
            icon="el-icon-download"
            @click="downLoadEmptyBox"
            v-if="!seeFlag"
            >模板下载</el-button
          >
        </el-upload>
      </div>
    </div>
  </div>
</template>

<script>
import uploadImg from "@/components/uploadImg.vue";
import moment from "moment";
import { downloadExcelTemplate } from "@/utils/CommUtil";
export default {
  name: "addPlan",
  components: { uploadImg },
  props: {
    showUpload: {
      default: true,
    },
    seeFlag: {
      default: false,
    },
    planTag: {
      default: null,
    },
    termDis: {
      default: true,
    },
  },
  data() {
    return {
      palnTagList: [
        { key: "PFRF", value: "提重返重" },
        { key: "PFRE", value: "提重返空" },
        { key: "PERF_WC", value: "提空返重（指定箱号）" },
        { key: "PERF_NC", value: "提空返重（不指定箱号）" },
        { key: "PE_WC", value: "提空箱（指定箱号）" },
        { key: "PE_NC", value: "提空箱（不指定箱号）" },
        { key: "PF", value: "提重箱" },
        { key: "IF", value: "进重箱" },
        { key: "IE", value: "进空箱" },
        { key: "BOX", value: "装箱" },
        { key: "UNBOX", value: "拆箱" },
      ],
      termList: [],
      form1: {},
      form: {
        payMode: "ZD",
      },
      oriForm: {
        payMode: "ZD",
      },
      rules: {
        tradeFlag: [
          { required: true, message: "请选择贸易类型", trigger: "change" },
        ],
        voyId: [
          { required: true, message: "请选择出口船名航次", trigger: "change" },
        ],
        termCode: [
          { required: true, message: "请选择作业码头", trigger: "blur" },
        ],
        workZone: [
          { required: true, message: "请选择码头作业区", trigger: "change" },
        ],
        opsttm: [
          { required: true, message: "请选择开始时间", trigger: "change" },
        ],
        opedtm: [
          { required: true, message: "请选择结束时间", trigger: "blur" },
        ],
        payMode: [
          { required: true, message: "请选择结算方式", trigger: "change" },
        ],
        payer: [
          { required: true, message: "请选择付款单位", trigger: "change" },
        ],
        cstTrnscomCd: [
          { required: true, message: "请选择车队单位", trigger: "change" },
        ],
        planAttachmentList: [
          { required: true, message: "请选择附件", trigger: "change" },
        ],
      },
      dataList: {},
      shipNo: [],
    };
  },
  watch: {
    form() {
      if ("HX" === this.form.termCode) {
        this.set();
        this.getWork();
      }
      if (this.form.id) {
        this.voyId(this.form.voyId);
      }
    },
    planTag: {
      immediate: true,
      handler: function () {
        let that = this;
        this.$nextTick(() => {
          that.palnTagList.forEach((item) => {
            console.log(this.planTag);
            if (that.planTag === item.key) {
              that.form.planTag = item.key;
              that.form.planTagName = item.value;
              if (
                [
                  "提空返重（不指定箱号）",
                  "提空返重（指定箱号）",
                  "进空箱",
                  "进重箱",
                  "提空箱（不指定箱号）",
                  "装箱（不指定箱号）",
                ].includes(that.form.planTagName)
              ) {
                this.form.opedtm = "9998-12-31 23:59:59";
                this.$forceUpdate();
              }
            }
          });
          this.oriForm = JSON.parse(JSON.stringify(this.form));
        });
      },
    },
  },
  methods: {
    downLoadEmptyBox() {
      downloadExcelTemplate("emptyBoxTemplate.xls");
    },
    batchImportEmpty(file) {
      this.$emit("batchImportEmpty", file);
    },
    setVal() {
      if ("" !== this.form.opsttm) {
        console.log(9999);
        console.log(this.form.planTagName);
        if (
          [
            "提重返空",
            "提重",
            "提空箱（指定箱号）",
            "拆箱",
            "装箱（指定箱号）",
          ].includes(this.form.planTagName)
        ) {
          console.log(this.form.opsttm);
          this.form.opedtm = moment(this.form.opsttm)
            .add(7, "days")
            .subtract(1, "seconds")
            .format("YYYY-MM-DD HH:mm:ss");
          this.$forceUpdate();
          //.subtract(1,'seconds')
        }
      }
    },
    voyId(id) {
      console.log(99999);
      this.shipNo.forEach((item) => {
        if (id === item.id) {
          this.form.voyName1 =
            item.vslName +
            "/" +
            item.voyage +
            "/" +
            (item.iefg === "I" ? "进口" : "出口");
          console.log(888);
        }
      });
    },
    voyName(id) {
      console.log(id);
      this.shipNo.forEach((res) => {
        if (id === res.id) {
          this.form.voyName = res.vslName;
        }
      });
    },
    re() {
      this.$forceUpdate();
    },
    openDialog() {
      this.dialogVisible = true;
    },
    add() {
      this.$emit("add");
    },
    set() {
      this.$forceUpdate();
    },
    getDate() {
      this.$emit("add");
    },
    getFile(res) {
      this.$set(this.form, "planAttachmentList", res);
    },
    getWork() {
      this.$api
        .opaAreaCode({
          termCode: this.form.termCode,
        })
        .then((res) => {
          this.dataList.workZone = res.data.data;
          this.$forceUpdate();
        })
        .catch();
    },
    remoteMethod(val = "") {
      console.log(this.$route.name, "查询船名航次----------------");
      let params = {
        termCode: "", //码头编码
        schedulesType:
          this.$route.name == "emptyBox" || this.$route.name == "heavyBox"
            ? "CONTAINER"
            : "", //件散货BULK_CARGO，集装箱CONTAINER

        iefg:
          this.$route.name == "emptyBox" || this.$route.name == "heavyBox"
            ? "I"
            : "", //进出口 进口I,出口E
        something: val, //模糊查询参数
      };
      if (this.$route.name == "emptyBox" || this.$route.name == "heavyBox") {
        params.type = "V";
      }
      this.$api
        .voyagesVslVoy(params)
        .then((res) => {
          this.shipNo = res.data;
          console.log(999);
          console.log(this.form);
          if (this.form.id) {
            console.log(777);
            this.voyId(this.form.voyId);
          }
        })
        .catch();
    },
    setFile() {
      this.dataList = {
        INTERNALFG_IM: [],
        sell: [],
        customer: [],
        consignor: [],
        cstTrnscomCd: [],
        workZone: [],
      };
      this.$api.term().then((res) => {
        this.termList = res.data.data;
      });
      this.$api
        .refCode({
          domain: "SETTLEMODE",
        })
        .then((res) => {
          this.dataList.SETTLEMODE = res.data.data;
          this.$forceUpdate();
        })
        .catch();
      this.$api
        .customerByType({
          tenantTypeName: "货主",
        })
        .then((res) => {
          this.dataList.consignor = res.data.data;
          this.$forceUpdate();
        })
        .catch();
      this.$api
        .customerByType({
          tenantTypeName: "运输公司",
        })
        .then((res) => {
          this.dataList.cstTrnscomCd = res.data.data;
          this.$forceUpdate();
        })
        .catch();
      this.$api
        .customer()
        .then((res) => {
          this.dataList.cstCoperListtomer = res.data.data;
          this.$forceUpdate();
        })
        .catch();
      let params = {
        termCode: "", //码头编码
        schedulesType:
          this.$route.name == "emptyBox" || this.$route.name == "heavyBox"
            ? "CONTAINER"
            : "", //件散货BULK_CARGO，集装箱CONTAINER

        iefg:
          this.$route.name == "emptyBox" || this.$route.name == "heavyBox"
            ? "I"
            : "", //进出口 进口I,出口E
        something: "", //模糊查询参数
      };
      if (this.$route.name == "emptyBox" || this.$route.name == "heavyBox") {
        params.type = "V";
      }
      this.$api
        .voyagesVslVoy(params)
        .then((res) => {
          this.shipNo = res.data;
          console.log(999);
          console.log(this.form);
          if (this.form.id) {
            console.log(777);
            this.voyId(this.form.voyId);
          }
        })
        .catch();

      this.$api
        .refCode({
          domain: "INTERNALFG_IM",
        })
        .then((res) => {
          console.log(res, "----------------------------refCode");
          this.dataList.INTERNALFG_IM = res.data.data;
          this.$forceUpdate();
        })
        .catch();
      let info = localStorage.getItem("userInfo");
      console.log(info);
      if (undefined !== info && !this.form.cstCstmcd) {
        this.form.cstCstmcd = JSON.parse(info).customerCode;
        this.form.createUser = JSON.parse(info).name;
      }
    },
  },

  computed: {},
  created() {
    this.setFile();
  },
  mounted() {
    this.oriForm = JSON.parse(JSON.stringify(this.form));
  },
};
</script>
<style lang="scss" scoped>
.title {
  height: 50px;
  background: #0f47b8;
  color: #fff;
  font-size: 16px;
  padding-left: 30px;
  display: flex;
  align-items: center;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
}
:deep .el-form-item__label {
  //text-align: left;
  padding-left: 10px;
}
:deep .el-upload--picture-card {
  width: 80px;
  height: 80px;
  line-height: 80px;
}
.btn {
  text-align: right;
  .add {
    margin-left: 10px;
    background: #0f47b8;
    height: 30px;
    padding: 5px 10px;
  }
}
.content {
  padding: 20px;
  box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.25);
  border-radius: 5px;
  border: 1px solid #d7d7d7;
  border-top: none;
}
.line {
  border-bottom: 1px solid #d7d7d7;
  margin-bottom: 20px;
}
</style>
